<script>
export default {
  name: 'AsyncData',
}
</script>
<script setup>
import { onMounted, ref, shallowRef } from 'vue'
import * as echarts from 'echarts/core'

import { useEchartsResizeAndDestory } from '../hooks/EchartsResizeAndDestoryHooks'

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
// 图表配置
const data = {
  categories: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
  values: [
    randomData(),
    randomData(),
    randomData(),
    randomData(),
    randomData(),
    randomData(),
  ],
}
const option = {
  title: {
    text: '静态数据加载示例',
  },
  tooltip: {},
  legend: {
    data: ['销量'],
  },
  xAxis: {
    data: data.categories,
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: data.values,
    },
  ],
}

onMounted(() => {
  init()
})

const echartsContainerRef = ref()
const chartInstance = shallowRef()

useEchartsResizeAndDestory(chartInstance, echartsContainerRef)

function init() {
  chartInit()
}
// 初始化
function chartInit() {
  const echartsContainer = echartsContainerRef.value
  if (!echartsContainer) return

  chartInstance.value = echarts.init(echartsContainer)
  chartInstance.value.setOption(option)
}

function randomData() {
  return Math.ceil(Math.random() * 100)
}
</script>

<template>
  <div class="h-80 w-full flex flex-col">
    <div
      ref="echartsContainerRef"
      v-loading="dataLoading"
      class="flex-1 h-0"
    ></div>
  </div>
</template>

<style scoped></style>
